<template>
  <div>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row v-permission="['super']" :gutter="10">
        <el-col :span="4">
          <el-form-item label="组织">
            <el-select v-model="search.org_id" filterable>
              <el-option
                v-for="(item, index) in company"
                :key="index"
                :label="item.name"
                popper-class="w100"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button @click="handleClick">查询转发器列表</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="el-row--flex is-justify-space-between">
      <div class="el-row--flex">
        <el-button size="small" @click="handleOperationButton('Delete')">
          删除
        </el-button>
        <el-button size="small" @click="handleOperationButton('Enable')"
          >启用</el-button
        >
        <el-button
          size="small"
          style="margin-left: 0;"
          @click="handleOperationButton('Disable')"
        >
          禁用
        </el-button>
        <el-button size="small" @click="handleOperationButton('EditConfig')">
          编辑配置
        </el-button>
        <el-button size="small" @click="handleOperationButton('EditInfo')">
          编辑信息
        </el-button>
        <el-button size="small" @click="handleOperationButton('EditName')">
          编辑名称
        </el-button>
      </div>
      <div>
        <el-button
          size="small"
          @click="$refs.CreateForwarder.show(typeList, search.org_id)"
        >
          创建
        </el-button>
      </div>
    </div>

    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <el-table-column label="选择" width="60">
        <template slot-scope="scope">
          <el-radio
            v-model="tableSelect"
            :label="scope.row.forwarder_id"
            style="margin-left: 10px;"
            @change="getTemplateRow(scope.row.forwarder_id)"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="转发器 ID" prop="forwarder_id" sortable />
      <el-table-column label="转发器名" prop="forwarder_name" sortable />
      <el-table-column label="转发器类型" prop="forwarder_type" sortable />
      <el-table-column label="创建时间" prop="forwarder_create_time" sortable />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div
            :class="[
              'status',
              scope.row.forwarder_enabled === true ? 'success' : 'fail'
            ]"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" sortable>
        <template>
          <el-button class="f12" style="margin-right: 10px" type="text">
            更多信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-forwarder-info ref="EditForwarderInfo" @change="loadingData" />
    <edit-forwarder-config ref="EditForwarderConfig" @change="loadingData" />
    <edit-forwarder-name ref="EditForwarderName" @change="loadingData" />
    <create-forwarder ref="CreateForwarder" @change="loadingData" />
  </div>
</template>

<script>
import EditForwarderName from "@/views/setting/toast/editForwarderName";
import EditForwarderInfo from "@/views/setting/toast/editForwarderInfo";
import EditForwarderConfig from "@/views/setting/toast/editForwarderConfig";
import CreateForwarder from "@/views/setting/toast/createForwarder";
import org_getall from "@/utils/mixin/org_getall";
import radioTable from "@/utils/mixin/radioTable";
import checkSelectTable from "@/utils/mixin/checkSelectTable";
import {
  getList,
  getDetail,
  getTypeList
  // forwarderCreate
} from "@/api/setting/forwarder.js";
export default {
  name: "Forwarder",
  components: {
    EditForwarderName,
    EditForwarderConfig,
    EditForwarderInfo,
    CreateForwarder
  },
  mixins: [org_getall, radioTable, checkSelectTable],
  data: () => {
    return {
      search: {
        org_id: "0"
      },
      forwarder_id: "",
      detail: "",
      tableData: [],
      typeList: []
    };
  },
  mounted() {
    this.loadingData();
    if (this.UserInfo.org_id) this.search.org_id = this.UserInfo.org_id;
  },
  methods: {
    async loadingData() {
      await this.loadingOrgGetall();
      await this.loadingForwarderList();
      await this.getForwarderTypeList();
    },
    loadingForwarderList() {
      return getList({
        org_id: this.search.org_id
      }).then(res => {
        this.tableData = res.data.forwarder_list;
      });
    },
    async getForwarderTypeList() {
      let res = await getTypeList();
      if (res.data.code == 200) {
        console.log(res.data);
        this.typeList = res.data;
      } else {
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    },
    handleClick() {
      this.loadingForwarderList();
    },
    handleOperationButton(module) {
      let data = {};
      this.is_check_table("forwarder_id") &&
        (data = this.is_get_select_data()) &&
        this[`handle${module}`](data);
    },
    getForwarderDetil(forwarder_id) {
      return getDetail({
        forwarder_id: forwarder_id
      }).then(res => {
        this.detail = res.data.detail;
        console.log(this.detail);
      });
    },
    getTemplateRow(id) {
      console.log(id);
      this.forwarder_id = id;
      this.getForwarderDetil(id);
    },
    handleEditName({ forwarder_id }) {
      if (this.detail == "") {
        return;
      }
      this.$refs.EditForwarderName.show(
        this.detail.forwarder_name,
        forwarder_id
      );
    },
    handleEditInfo({ forwarder_id }) {
      if (this.detail == "") {
        return;
      }
      this.$refs.EditForwarderInfo.show(
        this.detail.forwarder_info,
        forwarder_id
      );
    },
    handleEditConfig({ forwarder_id }) {
      if (this.detail == "") {
        return;
      }
      this.$refs.EditForwarderConfig.show(
        this.detail.forwarder_config,
        forwarder_id
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.status {
  width: 15px;
  height: 15px;
  border-radius: 100px;
}
.success {
  background-color: $--color-success;
}
.fail {
  background-color: $--color-danger;
}
</style>
